<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-07 08:49:24
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-07 10:25:40
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部脚本 -->
    <script>
        function add(a,b){
            console.log('🚀TTT ~ add ~ a+b:', a+b)
            return a+b;
        }
            
        var c = add(1,2);
        console.log('🚀TTT ~ c:', c)
        var myAdd = function(a,b){
            return a+b;
        }
        var d = myAdd(1,2);
        console.log('🚀TTT ~ d:', d)
    </script>
    <!-- 外部脚本 -->
    <script src="./js/index.js">
        
    </script>
</head>
<body>
    喜欢的水果:<input id="inputFruit" type="text" placeholder="请输入您喜欢的水果" value="苹果">
    <br>
    <!-- 给按钮绑定事件 -->
    <input id="btn1" type="button" value="按钮1" onclick="clickBtn1()">
    <input id="btn2" type="button" value="按钮2" onclick="add(1,2)">
    <input id="btn3" type="button" value="按钮3">
</body>
<script>
        //获取输入框元素
        var fruitElement = document.getElementById("inputFruit");
        
        // alert("阻塞运行");
        console.log('🚀TTT ~ fruitElement:', fruitElement)
        if(fruitElement){
            var fruitValue = fruitElement.value;
            console.log('🚀TTT ~ fruitValue:', fruitValue);
            switch(fruitValue){
                case "苹果":
                // alert("用户喜欢苹果");
                break;
                case "香蕉":
                // alert("用户喜欢香蕉");
                break;
            }
        }
        function clickBtn1(){
            console.log("btn1被点击");
        }
        
        //通过id获取按钮元素
        var btn3 = document.getElementById("btn3");
        console.log('🚀TTT ~ btn3:', btn3)
        if(btn3){
            btn3.onclick = function (){
                console.log("btn3被点击");
            }
        }
    </script>
</html>